<template>
    <el-date-picker v-model="currentValue" type="daterange" align="left" unlink-panels id="d1c3c4c5"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="large"
                    :picker-options="pickerOptions">
    </el-date-picker>
</template>
<script>
    export default{
        props: {
            // 接收一个由父级组件传递过来的值
            value: ''
        },
        data(){
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime())
                                picker.$emit('pick', [start, end])
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24)
                                picker.$emit('pick', [start, end])
                            }
                        },
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                                picker.$emit('pick', [start, end])
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                                picker.$emit('pick', [start, end])
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                                picker.$emit('pick', [start, end])
                            }
                        }
                    ],
                }
            }
        },

        computed: {
            currentValue: {
                // 动态计算currentValue的值
                get() {
                    return this.value // 将props中的value赋值给currentValue
                },
                set(val){
                    this.$emit('input', val) // 通过$emit触发父组件
                }
            }
        }
    }
</script>